<template>
  <a-select
    v-model="nowVal"
    :placeholder="placeholder"
    allow-clear
    @change="changeHandle"
  >
    <a-option
      v-for="(item, index) in options"
      :key="index"
      :value="item.value"
      >{{ item.label }}</a-option
    >
  </a-select>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  interface Opt {
    value: string | number;
    label: string;
  }

  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
  });
  const emit = defineEmits(['update:value']);

  const options: Opt[] = [
    { label: '编制中', value: 1 },
    { label: '待审批', value: 2 },
    { label: '审批中', value: 3 },
    { label: '采购计划接收', value: 4 },
    { label: '审批通过', value: 5 },
    { label: '拒绝', value: 6 },
  ];

  const nowVal = ref(props.value);
  watch(
    () => props.value,
    (newVal) => {
      nowVal.value = newVal;
    }
  );
  const changeHandle = () => {
    emit('update:value', nowVal.value);
  };
</script>
